<template>
	<!-- 签到 -->
	<view>
		<view class="top">
			<navigator open-type="navigateBack">
				<image src="/static/images//blindbox//back.png" class="backicon"></image>
			</navigator>
			<!-- <image src="/static/images/home/signin/poster.png" class="poster"></image> -->
		</view>
		<view class="center">
			<view class="turntable">
				<image src="/static/images/home/signin/turntable_outerring.png" class="turntable_outerring"></image>
				<image src="/static/images/home/signin/turntable_pointer.png" class="turntable_pointer"></image>
				<image src="/static/images/home/signin/turntable_text1.png" class="turntable_text" @click="onClickRotate" v-if="lotteryNum > 0"></image>
				<image src="/static/images/home/signin/turntable_text2.png" class="turntable_text" v-else></image>
				<view class="turntable_face">
					<view class="face" :style="{ transform: 'rotate('+wheelDeg+'deg)',background:'url('+bgImg+')',backgroundSize:'cover'}">
						<view class="prize-list">
							<view class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
								<view class="prize-item" :style="{ transform: 'rotate('+(360/ prizeList.length) * index+'deg)'}">
									<image src="/static/images/home/signin/youhuiquan.png" class="prize-icon" v-if="item.category_name == '优惠券'"></image>
									<image src="/static/images/home/signin/huishouquan.png" class="prize-icon" v-if="item.category_name == '回收券'"></image>
									<image src="/static/images/home/signin/chongchouka.png" class="prize-icon" v-if="item.category_name == '重抽卡'"></image>
									<view class="prize-name">{{item.category_name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="desc">
			<view class="desc_title">签到抽奖豪礼</view>
			<view class="desc_content">
				<text>活动规则</text>
				<rich-text :nodes="lottery_rule"></rich-text>
			</view>
		</view>
		<overlay showSlot ref="reward">
			<view class="reward">
				<view class="reward_title">恭喜获得</view>
				<view class="reward_content">
					<image src="/static/images/home/signin/coupon.png"></image>
					<text>{{lucky.coupon_name}} * {{lucky.num}}</text>
				</view>
				<view class="reward_text">卡券在“我的-道具”中查看</view>
			</view>
		</overlay>
	</view>
</template>

<script>
	import overlay from '@/components/overlay'
	export default {
		components:{
			overlay
		},
		data() {
			return {
				prizeList: [], //奖品分类
				bgImg: '/static/images/home/signin/turntable_face.png', //  转盘背景
				lucky: {
					coupon_id:'',
					num:'',
					coupon_name:''
				}, //  中奖信息
				wheelDeg: 0, //转的角度
				lotteryNum:1,//剩余抽奖次数
				lottery_rule:'',//抽奖说明
				allowTap:true// 防误触
			}
		},
		onLoad() {
			this.getLottery();
			this.getLotteryrule();
		},
		methods:{
			//获取抽奖界面信息
			getLottery(){
				this.$api.lottery().then(res=>{
					this.prizeList = res.coupon;
					this.lotteryNum = res.num;
				})
			},
			//抽奖说明
			getLotteryrule(){
				this.$api.lotteryrule().then(res=>{
					this.lottery_rule = res.lottery_rule;
				})
			},
			// 抽奖
			onClickRotate() {
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				this.$api.dolottery().then(res=>{
					this.lucky = res;
					let luckyindex = '';
					this.prizeList.map((item, index) => {
						if(this.lucky.coupon_id == item.coupon_id) {
							luckyindex = index + 1;
						}
					})
					this.wheelDeg = this.wheelDeg - this.wheelDeg % 360 + 8 * 360 + (360 - 360 / this.prizeList.length * luckyindex) + 22.5;
					setTimeout(() => {
						this.$refs.reward.show();
						this.$api.lottery().then(res=>{
							this.lotteryNum = res.num;
						})
					}, 4500);
				})
			}
		}
	}
</script>

<style lang="scss">
.top{
	width: 750rpx;
	height: 492rpx;
	background-image: url("../../static/images/home/signin/top.png");
	background-size: cover;
	
	.topbg{
		@include img;
	}
	.backicon{
		width: 35rpx;
		height: 35rpx;
		margin: 126rpx 0 0 20rpx;
	}
	.poster{
		width: 750rpx;
		height: 572rpx;
		margin-top: 72rpx;
	}
}
.center{
	width: 750rpx;
	height: 916rpx;
	background-image: url("../../static/images/home/signin/center.png");
	background-size: cover;
	margin-top: -5rpx;
}
.turntable{
	width: 630rpx;
	height: 630rpx;
	position: relative;
	top: 176rpx;
	left: 80rpx;
	
	&_outerring{
		width: 630rpx;
		height: 630rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 996;
	}
	&_face{
		width: 556rpx;
		height: 556rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 997;
		
		.face{
			width: 100%;
			height: 100%;
			overflow: hidden;
			transition: transform 4s ease-in-out;
		}
	}
	&_pointer{
		width: 164rpx;
		height: 272rpx;
		position: absolute;
		top: 127rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 998;
	}
	&_text{
		width: 108rpx;
		height: 108rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 999;
	}
}
.desc{
	width: 750rpx;
	background: linear-gradient(179deg, #e05cab 0%, #e260bb 52%, #e363c5 100%);
	padding-bottom: 30rpx;
	margin-top: -5rpx;
	// background-image : url("../../static/images/home/signin/bot.png");;
	
	&_title{
		width: 282rpx;
		height: 75rpx;
		background: linear-gradient(90deg, #FF6000 0%, #FF0B0B 100%);
		border-radius: 20rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		@include center;
		margin: 0 auto;
		transform: translateY(-50%);
	}
	&_content{
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		opacity: 0.65;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding: 76rpx 60rpx 40rpx;
		margin: 0 auto;
		
		text{
			font-weight: bold;
			margin-bottom: 20rpx;
			display: inline-block;
		}
	}
}

.prize-list {
	width: 100%;
	height: 100%;
	position: relative;
	text-align: center;
	transform: rotate(20deg);
}

.prize-item-wrapper {
	position: absolute;
	top: -40rpx;
	left: 51%;
	transform: translateX(-50%);
	width: 300rpx;
	height: 320rpx;
}

.prize-item {
	width: 100%;
	height: 100%;
	transform-origin: bottom;
}

.prize-name {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #9E459E;
}

.prize-icon {
	width: 102rpx;
	height: 58rpx;
	padding-top: 70rpx;
}
.reward{
	width: 530rpx;
	height: 522rpx;
	background-image: url();
	background-size: 100% 100%;
	text-align: center;
	padding-top: 14rpx;
	
	&_title{
		font-size: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1A2294;
	}
	&_content{
		margin-top: 68rpx;
		@include column-center;
		
		image{
			width: 166rpx;
			height: 166rpx;
		}
		text{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 12rpx;
		}
	}
	&_text{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 78rpx;
	}
}
</style>